<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div style="height: 300px;width: 300px;border: 5px solid rgb(238, 9, 9);">
        <div style="height: 100px;width: 100px;border: 5px solid blue;">
        </div>
    </div>
    <p class="pos_fixed">我的角标</p>
    <div class="tran-time"></div>
    <p style="margin-bottom: 100px;"></p>
    <div class="translate"></div>
    <p style="border-radius: 300px;"></p>
    <p class="mystyle">公共样式</p>
    <p id="pera1">2</p>
    <p class="pera1">1</p>
    <p style="color:rgb(107, 16, 16);">内部样式</p>
    <p style="text-decoration: line-through;">背景图片</p>
    <a href="www.baidu.com" style="text-decoration: none;">百度</a>
    <p style="text-transform: uppercase;">This is some text.</p>
    <p style="text-transform: uppercase;">This is some text.</p>
    <p class="translate"></p>
<ul>
    <li><a class="active" href="home">主页</a></li>
    <li><a href="news">新闻</a></li>
    <li><a href="contact">联系</a></li>
    <li><a href="about">关于</a></li>
</ul>
<div style="height: 300px;width: 400px;overflow: scroll;color: red;">
    <div class="static">666666666666</div>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直的。</p>
</div>
    <style>
        div.sticky{
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: aqua;
            border: 2px solid red;
        }
        .translate{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
        }
        .translate:hover{
            animation-name: example;
            animation-duration: 10s;
            animation-iteration-count: 3;
        }
        @keyframes example{
            0%{
                background-color: blue;
                left: 0px;
                top: 0px;
            }
            25%{
                background-color: brown;
                left: 300px;
                top: 0px;
            }
            50%{
                background-color: rgba(0, 0, 0, 0.118);
                left: 300px;
                top: 300px;
            }
            75%{
                background-color: chocolate;
                left: 0px;
                top: 300px;
            }
            100%{
                background-color: darkmagenta;
                left: 0px;
                top: 0px;
            }
        }
        
        li{
            text-align: center;
            border-bottom: 1px solid red;
        }
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 400px;
            background-color: blueviolet;
            border: 10px solid green;
        }
        li a {
            display: block;
            width: 92%;
            color: aqua;
            padding: 8px 16px;
            text-decoration: none;
        }
        li a:hover{
            background-color: black;
            color: brown;
        }
        li a.active{
            background-color: rgb(18, 186, 186);
            color: white;
        }
       #pera1{
        border: 10px solid rgb(59, 16, 216);
       }
       .pera1{
        border: 10px solid rgb(126, 26, 26);
       }
       body{
        background-image: url("C:/Users/Administrator/Desktop/微信图片_20250304160055.jpg");
        
       }
    </style>
    <p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>
    <div class="sticky">我是有粘性的！</div>
    <div style="padding-bottom: 2000px;"></div>

    

</body>
<<<<<<< HEAD
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<body>
    <ul class="pagination">
        <li><a href="5" >&laquo;</a></li>
        <li ><a href="4">1</a></li>
        <li ><a href="3">2</a></li>
        <li><a href="2">3</a></li>
        <li><a href="1">4</a></li>
        <li><a href="0">5</a></li>
        <li><a href="9">&raquo;</a></li>
 </ul>
    <p class="body"></p>
    <span style="border: 5px solid red;width: 300px;height: 300px;display: inline-block;"></span>
    <button type="button" onclick="fnbutton()">点我</button>


    <script>
        function changeImage() {
            element = document.getElementById('myimage')
            if (element.src.match("20250319103727")) {
                element.src = "C:/Users/Administrator/Desktop/微信图片_20250319115300.png";
            }
            else {
                element.src = "C:/Users/Administrator/Desktop/微信图片_20250319103727.png";
            }
        }
    







        document.write("<p style='border: 5px solid red;width: 300px;'>这是一个段落。</p>");

        function fnbutton() {
            alert('欢迎软件测试')
        }
    </script>
    <img id="myimage" onclick="changeImage()" src="C:\Users\Administrator\Desktop\微信图片_20250319103727.png" width="100"
        height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>


<style>
    ul{
        list-style-type: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background-color:white;
        text-transform: none;
    }
    li{
        float: left;
    }
    a{
        display: block;
        color: blue;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-decoration: none;
    }
    a:hover{
        background-color: brown;
        border-radius: 10%;
    }
    li a.sfd{
        background-color: green;
        color: aliceblue;
        border-radius: 10%;
    }

    
</style>


</body>

=======
>>>>>>> 98ac71504b76b6d11f1b11276372a7b3f378031c
</html>